// pages/Login.tsx
import { useAuth } from '../context/AuthContext';
import { useState } from 'react';
import '../assets/login.css'

const Login = () => {
  const { login } = useAuth();
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');
  const [isLoading, setIsLoading] = useState(false); // 新增加载状态

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setIsLoading(true); // 开始请求，按钮置为加载中
    try {
      await login(password);
    } catch (err) {
      setError('Invalid password');
    } finally {
      setIsLoading(false); // 请求结束，恢复按钮
    }
  };

  return (
    <div className="login-wrapper">
      <div className="login-container">
        <form onSubmit={handleSubmit} className="login-form">
          <div className="input-group">
            <input
              type="password"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="请输入密码"
              required
              className="password-input"
            />
          </div>
          <button 
            type="submit" 
            className="login-button"
            disabled={isLoading} // 加载时禁用按钮
          >
            {isLoading ? '登录中...' : '登 录'} 
          </button>
          {error && <p className="error-message">{error}</p>}
        </form>
      </div>
    </div>
  );
};
export default Login;